.progress {
    box-shadow: none;
    display: block;
    width: 100%;
    height: 0.25rem;
    overflow: hidden;
    margin-bottom: 0;
    background-color: transparent;
}

.progress .progress-bar {
    box-shadow: none;
    height: 0.25rem;
    border-radius: 0;
    background-color: $blue-500;
}

.progress .progress-bar-animated {
    transition: width 2s ease-in-out
}

.progress .indeterminate {
    background-color: $blue-900;
}

.progress .indeterminate:before {
    content: "";
    display: block;
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left,right;
    animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
}

.progress .indeterminate:after {
    content: "";
    display: block;
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left,right;
    animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
    animation-delay: 1.15s
}


@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%
    }

    60% {
        left: 100%;
        right: -90%
    }

    100% {
        left: 100%;
        right: -90%
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%
    }

    60% {
        left: 107%;
        right: -8%
    }

    100% {
        left: 107%;
        right: -8%
    }
}
